<template>
    <div> 
        <div class="newsimg"><img :src="newsimgUrl" alt="顶部图片"></div>
         <div v-for="(item,index) in resonglistarr" :key="index" class="infinite-list"  style="overflow:auto">
    <router-link :to="'/newsong/'+item.id" class="newsonglist">
        <!-- 直接利用element的布局 -->
<el-row :gutter="20">
  <el-col :span="4" ><div class="indexsign">{{index+1}}</div></el-col>
  <el-col :span="16"><span class="songname">{{item.name}}</span><span class="songer"> [{{item.ar[0].name}}]</span></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"><i class="el-icon-video-play"></i></div></el-col>
</el-row>  
    </router-link>
  </div></div>
</template>
<script>
import axios from 'axios'
export default {
    name:'Newsong',
    data(){
        return{
             resonglistarr:[],
             newsimgUrl:'',
             
        }
    },methods:{
        getnewssong(){
            axios({
                method:'get',
                url:'http://localhost:5000/top/list?idx=0'
            }).then((res)=>{
                console.log(res.data.playlist.creator.avatarUrl);
                this.resonglistarr=res.data.playlist.tracks;
                this.newsimgUrl=res.data.playlist.coverImgUrl;
                
            }).catch((err)=>{
                console.log(err)
            })
        }
    }, mounted(){
        this.getnewssong();
    }
}
</script>
<style lang="scss" scoped>
*{
    margin :0;
    padding: 0;
}
  img.songlistimg {
    width: 40px;
}
.newsimg{
    width: 100%;
    height: 15rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    // margin-top: -47px;
}
.newsimg img{
    width: 100%;
    height: 15rem;
}
.grid-content.bg-purple{
    margin: auto;
}
.el-col-4 {
   display: flex; 
}
.songname{
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}
.songer{
    color: #555;
    opacity: 0.8;
    margin-top: 0.3rem;
}
.indexsign{
    margin: auto;
}
.infinite-list{
    height: 3.2em;
    display: block;
}
.infinite-list:nth-child(-n+4) {
    background-color: rgba(231, 177, 177,.3);
    border-radius: 0.8em;
    margin-top: 0.8em;
    }
    .el-row {
    line-height: 3em;
}
</style>